<template>
  <el-dialog title="添加参赛人员" v-model="show" @opened="handleOpenModaled">
    <div class="content-heder-container">
      <el-space>
        <el-input
          v-model="query_data.studentName"
          placeholder="搜索姓名"
        ></el-input>
        <el-input
          v-model="query_data.phone"
          placeholder="搜索手机号"
        ></el-input>
        <el-button
          size="large"
          :icon="Search"
          circle
          @click="() => handleLoad(true)"
          :loading="loading"
        />
        <!-- <el-button
          size="large"
          :icon="Delete"
          circle
          @click="handleRest"
        /> -->
      </el-space>
    </div>

    <el-table
      :data="data"
      empty-text="未查询到未报名参赛人员"
      v-loading="loading"
    >
      <el-table-column prop="studentId" label="学生ID" />
      <el-table-column prop="studentName" label="姓名" />
      <el-table-column prop="phone" label="手机号码" />
      <el-table-column label="性别" prop="gender" width="72">
        <template #default="scope">
          <el-tag v-if="scope.row.gender == 0" type="danger">女</el-tag>
          <el-tag v-if="scope.row.gender == 1" type="primary">男</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="schoolName" label="学校" />
      <el-table-column prop="date" label="操作">
        <template #default="scope">
          <el-button
            @click="handleStuToJoin(scope.row)"
            :disabled="disabled"
            :loading="loading"
            >报名</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination
        background
        layout="prev, pager, next, total"
        :total="total"
        @current-change="handlePage"
      />
    </div>
  </el-dialog>
</template>

<script  setup>
import { usePage } from "@/hooks/usePage";
import {
  ApplicationApi,
  GetNotRegisteredStudentsApi,
} from "@/api/manage/competition";
import { ref } from "vue";
import { Search, Delete } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";

const props = defineProps({
  eventId: Number | String,
});
const show = ref(false);
const { total, data, loading, query_data, handleLoad, handlePage } = usePage({
  api_fn: GetNotRegisteredStudentsApi,
  q_data: {
    studentName: "",
    phone: "",
    eventId: props.eventId,
  },
});
const handleOpenModaled = () => {
  handleLoad(true);
};
const handleOpenModal = () => {
  show.value = true;
};
const handleRest = () => {
  query_data.value.studentName = "";
  query_data.value.phone = "";
  handleLoad(true);
};
/**
 * 加入报名
 */
const disabled = ref(false);
const handleStuToJoin = async (row) => {
  disabled.value = true;
  console.log(row);
  // 报名操作
  let res = await ApplicationApi({
    studentId: row.studentId,
    eventId: props.eventId,
  });
  if (!res.success) {
    ElMessage.error(res.message);
    disabled.value = false;
  } else {
    ElMessage.success(res.message);
    // 获取列表
    handleLoad(true);
    disabled.value = false;
  }
};
defineExpose({
  handleOpenModal,
});
</script>

<style lang="scss" scoped>
.content-heder-container {
  padding: 16px 0;
  display: flex;
  align-content: center;
  justify-content: flex-end;
}
.pagination-container {
  display: flex;
  justify-content: center;
  padding: 32px 0;
}
</style>